﻿/**
 * 公用信息提示modal
 * 作者不是我，盗用他人的
 */
/* modal模板
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body"> ... </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
*/
/* 使用说明
1、modals普通alert共有四个，分别为modals.info(), modals.correct(), modals.warn(), modals.error(), 使用方法有两个分别为modals.info('...')和modals.info({...})
2、modals确认confirm一个，为modals.confirm('...')或modals.confirm({...})
3、modals打开弹出窗一个，为modals.openWin()
*/
(function ($, window, document, undefined) {
    window.modals = window.modals || {};

    function _modal_structure(config, ok, cancel) {
        // <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        var modal = document.createElement('DIV');
        modal.id = 'modal-tips-div';
        modal.className = 'modal fade';
        modal.tabindex = -1;
        modal.role = 'dialog';
        modal.setAttribute('aria-labelledby', 'myModalLabel');

        // <div class="modal-dialog" role="document">
        var dialog = document.createElement('DIV');
        dialog.className = 'modal-dialog modal-' + (config.large ? 'lg' : 'sm');

        //update for HANZO, 2016/12/28
        if (config.width) { dialog.style.width = config.width + 'px'; }

        dialog.role = 'document';
        modal.appendChild(dialog);

        // <div class="modal-content">
        var content = document.createElement('DIV');
        content.className = 'modal-content';
        dialog.appendChild(content);

        // <div class="modal-header">
        var header = document.createElement('DIV');
        header.className = 'modal-header';

        // <button type="button" class="close" data-dismiss="modal"
        // aria-label="Close"><span aria-hidden="true">&times;</span></button>
        var close_icon = document.createElement('BUTTON');
        close_icon.className = 'close';
        close_icon.type = 'button';
        close_icon.setAttribute('data-dismiss', 'modal');
        close_icon.setAttribute('aria-label', 'Close');
        close_icon.innerHTML = '<span aria-hidden="true">&times;</span>';
        header.appendChild(close_icon);

        // //<h4 class="modal-title">Modal title</h4>
        if (config.title) {
            var title = document.createElement('H5');
            title.id = 'myModalLabel';
            title.className = 'modal-title';
            title.innerHTML = /* '<i class="fa fa-fw fa-info-circle"></i>'+ */config.title;
            header.appendChild(title);
        }

        content.appendChild(header);

        // <div class="modal-body">
        var body = document.createElement('DIV');
        body.className = 'modal-body';

        //update for HANZO, 2016/12/28
        if (config.src) {
            body.style.height = config.height + 'px';

            var frame = document.createElement('iframe');
            frame.style.margin = 0;
            frame.style.padding = 0;
            frame.style.width = '100%';
            frame.style.height = '100%';
            frame.style.border = 'none';
            frame.src = config.src;
            body.appendChild(frame);
        } else {
            body.innerHTML = config.text || '';
        }

        content.appendChild(body);

        if (ok || cancel || config.has_footer) {
            // <div class="modal-footer">
            var footer = document.createElement('DIV');
            footer.className = 'modal-footer';

            if (cancel) {
                // <button type="button" class="btn btn-default"
                // data-dismiss="modal">Close</button>
                var btn_close = document.createElement('BUTTON');
                btn_close.className = 'btn btn-default btn-sm';
                btn_close.type = 'button';
                btn_close.setAttribute('data-dismiss', 'modal');
                btn_close.innerHTML = config.cancel_label;
                btn_close.onclick = function () {
                    if (config.cancel_call) { config.cancel_call.call(this); }
                };

                footer.appendChild(btn_close);
            }

            if (ok) {
                // <button type="button" class="btn btn-primary">Save</button>
                var btn_ok = document.createElement('BUTTON');
                btn_ok.className = 'btn btn-primary btn-sm';
                btn_ok.type = 'button';
                //btn_ok.setAttribute('data-dismiss', 'modal');
                btn_ok.innerHTML = config.ok_label;
                btn_ok.onclick = function () {
                    $("#modal-tips-div").modal('hide');
                    if (config.callback) { config.callback.call(this); }
                };

                footer.appendChild(btn_ok);
            }

            content.appendChild(footer);
        }

        return modal;
    }

    function _create_modal(config, ok, cancel) {
        _remove_modal();

        var modal = _modal_structure(config, ok, cancel);

        document.body.appendChild(modal);

        $('#modal-tips-div').modal('show');

        $('#modal-tips-div').on("hidden.bs.modal", function () {
            modals.fixwyhtml5();
            _remove_modal();
            $(this).removeData("bs.modal");
        });


        return modal;
    }

    function _remove_modal() {
        $("#modal-tips-div").remove();
        $("div.modal-backdrop").remove();
    }

    /**
	 * 目前阶段涉及参数说明 { title: 'modal标题', text: '提示内容', ok_label: '确定按钮的内容',
	 * cancel_label: '取消按钮的内容', callback: '确定按钮的回调函数', cancel_call: '取消按钮的回调函数',
	 * large: 'modal大小模式' }
	 */
    var _CONFIG = {
        ok_label: '确定',
        cancel_label: '关闭',
        large: false
    };
    function modal_params(text, callback) {
        return $.extend({}, _CONFIG, (typeof text != 'object') ? { text: text, callback: callback } : text);
    }

    var _TITLE = { info: '提示', correct: '成功', warn: '警告', error: '错误' };
    function _alert(args, type) {
        var cfg = modal_params.apply(this, args);
        cfg.title = cfg.title || _TITLE[type];

        return _create_modal(cfg, false, true);
    }

    /**
	 * 用法: 1.modals.info('...'); 2.modals.info({ ... });
	 * 
	 * correct、warn、error可不要。为统一规范尽量选择相应函数
	 * 
	 * @returns {*}
	 */
    modals.info = function () {
        return _alert.call(this, arguments, 'info');
    };

    modals.correct = function () {
        return _alert.call(this, arguments, 'correct');
    };

    modals.warn = function () {
        return _alert.call(this, arguments, 'warn');
    };

    modals.error = function () {
        return _alert.call(this, arguments, 'error');
    };

    /**
	 * 用法: 1.modals.confirm('...'); 2.modals.confirm({ ... });
	 * 
	 * @returns {*}
	 */
    modals.confirm = function () {
        var cfg = modal_params.apply(this, arguments);
        cfg.title = cfg.title || '确认提示';
        cfg.cancel_label = cfg.cancel_label == _CONFIG.cancel_label ? '取消' : cfg.cancel_label;

        return _create_modal(cfg, true, true);
    };

    modals.popup = function (cfg) {
        return _create_modal(cfg || {}, false, false);
    };

    //{"backdrop":"static"}点击背景不会消失  
    var _win_config = { winId: 'user-win', backdrop: true, keyboard: true, width: 900 };
    //config={win:'userWin',top:'auto'/20,width:'900px',title:'新增用户'}
    modals.openWin = function (config) {
        var winId = config.winId || _win_config.winId;
        this.closeWin(winId);
    	/*if($("#"+winId).length>0){
    		this.showWin(winId);
    		return false;
    	}*/
        config = $.extend({}, _win_config, config);
        this._create_modal(config);
        if (!config.url && !config.loadContent) {
            this.error('未配置url');
        }
        $("#" + winId).modal({ remote: config.url, backdrop: config.backdrop || _win_config.backdrop, keyboard: config.keyboard || _win_config.keyboard });
        if (config.loadContent) {
            config.loadContent();
        }
        this.showWin(config.winId || _win_config.winId);
        //attach show event
        $("#" + winId).on('shown.bs.modal', function () {
    		/*if(config.top=="auto"){
	    		var height=$(window).height()>$(this).find(".modal-dialog").eq(0).height()?($(window).height()-$(this).find(".modal-dialog").eq(0).height())/2:0;
				$(this).find(".modal-dialog").eq(0).css("margin-top",height); 
    		}*/
            $(this).on('loaded.bs.modal', function (event) {
                $(this).find(".modal-title").html(config.title);
            });
            if (config.showFunc)
                config.showFunc.call(this);
        });
        //attach hidden event
        $("#" + winId).on("hidden.bs.modal", function () {
            modals.closeWin(winId);
            if (config.hideFunc)
                config.hideFunc.call(this);
            modals.fixwyhtml5();
            $(this).removeData("bs.modal");

        });
    }
    //add by billjiang fix the wyhtml5 problem: wyhtml has the modal class,make the scrollbar hidden
    modals.fixwyhtml5 = function () {
        if ($(".wysihtml5-editor")) {
            $(document.body).removeClass('modal-open');
            $(document.body).css("padding-right", "0px");
        }
    }
    modals._create_modal = function (config) {
        var modal = document.createElement('DIV');
        modal.id = config.winId;
        modal.className = 'modal fade';
        modal.tabindex = -1;
        modal.role = 'dialog';
        modal.setAttribute('aria-labelledby', 'myModalLabel');
        modal.setAttribute('aria-hidden', true);

        // <div class="modal-dialog" role="document">
        var dialog = document.createElement('DIV');
        dialog.className = 'modal-dialog';
        dialog.role = 'document';
        if (isNaN(config.width) && config.width.indexOf("px") > 0)
            $(dialog).css('width', config.width);
        //dialog.style='width:'+config.width+';';
        else
            $(dialog).css('width', config.width + "px");
        //dialog.style='width:'+config.width+'px;'; 
        modal.appendChild(dialog);

        // <div class="modal-content">
        var content = document.createElement('DIV');
        content.className = 'modal-content';
        dialog.appendChild(content);

        document.body.appendChild(modal);
    }

    modals.closeWin = function (winId) {
        winId = winId || _win_config.winId;
        var win = document.getElementById(winId);
        if (win) {
            $(win).remove();
            $("div.modal-backdrop").remove();
        }
    }

    modals.hideWin = function (winId) {
        winId = winId || _win_config.winId;
        $("#" + winId).modal('hide');
    }

    modals.showWin = function (winId) {
        winId = winId || _win_config.winId;
        $("#" + winId).modal('show');
    }

    modals.removeData = function (winId) {
        winId = winId || _win_config.winId;
        //$("#myModal").on("hidden.bs.modal", function() {
        $("#" + winId).removeData("bs.modal");
        //});
    }
})(jQuery, window, document);